<template>
  <aside class="sidebar">
    <div class="sidebar-header">
      <h2><i class="fas fa-cogs"></i> 邻里互助平台</h2>
    </div>
    <nav class="sidebar-menu">

        <template v-for="item in menuItems" :key="item.name">
          <router-link

              :to="item.path"
              class="menu-item"

          >
            <i :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </router-link>
        </template>
<!--      v-if="item.role != 2"-->
    </nav>
    <div class="sidebar-footer">
      <a href="#" @click.prevent="logout" class="menu-item logout">
        <i class="fas fa-sign-out-alt"></i>
        <span>退出登录</span>
      </a>
    </div>
  </aside>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const menuItems = [
  { path: '/dashboard', icon: 'fas fa-tachometer-alt', name: '控制台' },
  { path: '/users', icon: 'fas fa-users', name: '邻里用户' },
  { path: '/products', icon: 'fas fa-gift', name: '积分商品' },
  { path: '/orders', icon: 'fas fa-shopping-cart', name: '积分订单' },
  { path: '/posts', icon: 'fas fa-file-alt', name: '社区动态' },
  { path: '/admins', icon: 'fas fa-user-shield', name: '管理员',role:2 },
  { path: '/notification', icon: 'fas fa-user-shield', name: '通知管理' },
];



const logout = () => {
  localStorage.removeItem('adminId');
  router.push('/login');
}
</script>

<style scoped>
/* 侧边栏使用浅灰色背景，搭配深色文字 */
.sidebar {
  width: 250px;
  background-color: #f8f9fa;
  color: #333;
  position: fixed;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
  border-right: 1px solid #e9ecef;
}

.sidebar-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #e9ecef;
}

.sidebar-header h2 {
  font-size: 22px;
  font-weight: 600;
}

.sidebar-menu {
  flex-grow: 1;
  padding: 10px 0;
}

.menu-item {
  padding: 14px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #555;
  text-decoration: none;
  transition: all 0.3s;
  font-size: 16px;
}

.menu-item i {
  width: 20px;
  text-align: center;
}

.menu-item:hover {
  background-color: #e9ecef;
}

/* 选中项使用柔和的绿色，代表亲近感 */
.menu-item.router-link-exact-active {
  background-color: #4caf50;
  color: white;
  font-weight: 500;
}

.sidebar-footer {
  padding: 10px 0;
  margin-top: auto;
  border-top: 1px solid #e9ecef;
}

.logout:hover {
  background-color: #c0392b;
  color: white;
}
</style>